<template>
    <div id="page">
      <div class="pa-top">
			
		
		<nav id="nav">
			<ul>
				<li class="act">推荐</li>
				<li>榜单</li>
				<li>关注</li>
                <img src="static/img/dtsousuo.PNG" alt="" class="wz">
                <img src="static/img/yybf.PNG" alt="">
			</ul>
            
		</nav>
		<!--内容部分HTML代码-->

		<div id="container">
			<div class="tab">
                 <div class="dt-box">
    <div class="swiper">
      <div class="swiper-item"> <img src="static/img/dtlunbo1.PNG" alt=""></div>
      <div class="swiper-item">   <img src="static/img/dtlunbo2.PNG" alt=""></div>
      <div class="swiper-item">   <img src="static/img/dtlunbo3.PNG" alt=""></div>
  
    </div>
  </div>
              <div class="tj-recommend">
                  <img src="static/img/dtmeirituijian1.PNG" alt="">
                  <img src="static/img/dtmeirituijian2.PNG" alt="">
                  <img src="static/img/dtmeirituijian3.PNG" alt="">
                  </div> 
             <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">   
             </div>
            

   <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">   
             </div>
             <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">   
             </div>
             <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">   
             </div>
             <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">   
             </div>
            </div>
<div class="tab" id="notice">
    <p>8英里2019/2020赛季城市赛歌集合</p>
    <div class="city">
     <img src="static/img/dtbdchengshi1.PNG" alt="">  
      <img src="static/img/dtbdchengshi2.PNG" alt="">  
   <img src="static/img/dtbdchengshi3.PNG" alt="">  
  <img src="static/img/dtbdchengshi4.PNG" alt="">  
   <img src="static/img/dtbdchengshi5.PNG" alt="">  
    <img src="static/img/dtbdchakan.PNG" alt="">  
    </div>
   <p>RLCH榜</p>
  <div class="Crunchies">
                  <img src="static/img/dtbdshouru.PNG" alt="">   
                    <img src="static/img/dtbdxf.PNG" alt="">   
             </div>
             <p>热门作品榜</p>
            <div class="dtbd-work">   <img src="static/img/dtbdremenzuopinbang.PNG" alt="">   </div>



 <p>本周练习榜</p>
 <img src="static/img/dtbdrmb.PNG" alt="" class="dtbd-Practice-list">
            </div>
            
			<div class="tab" id="dtbd-select">
        
                <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
                   <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
                  <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
                  <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
                  <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>

                  <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
                  <div class="dt-user1">
                    <img src="static/img/dtyonghutouxiang.PNG" alt="">           
                    <img src="static/img/dtyonghubofang.PNG" alt="">   
                    <img src="static/img/dtyonghudashang.PNG" alt="">   
                    <img src="static/img/dtdashang.PNG" alt="">  
             </div>
            
      </div>
		</div>
		</div>
    </div>
</template>
 <script>
    class SliderBox {
      /**
       * 构造器
       * @param {number} delay 切换延时
       */
      constructor(delay = 1000) {
        this.swiper = document.querySelector('.swiper') // 轮播图
        this.swiperItemList = document.querySelectorAll('.swiper-item') // 轮播项
        this.totalLength = this.swiperItemList.length // 轮播图个数
        this.delay = delay
        this.init()
      }
      /**
       * 初始化配置
       */
      init() {
        // 将轮播图第一项克隆, 并放在最后
        const cloneFirst = document.querySelectorAll('.swiper-item')[0].cloneNode(true)
        this.swiper.appendChild(cloneFirst)
        // 因为 totalLength 是原始的轮播图个数, 所以可以正确定位到原来的轮播图最后一个
        const cloneLast = document.querySelectorAll('.swiper-item')[this.totalLength - 1].cloneNode(true)
        this.swiper.insertBefore(cloneLast, this.swiper.firstChild)
        // 设置轮播图总长, 加上新加的两个
        this.swiper.style.width = (this.totalLength + 2) * 300 + 'px'
        // 当前轮播图位置分布为  5 12345 1
        // 初始化轮播图为 1 位置
        this.currentPosition = 1
        this.swiper.style.transform = `translateX(${-this.currentPosition * 300}px`
      }
      /**
       * 切换动画
       */
      animate() {
        // 如果正在切换, 则不动
        if (this.swiper.classList.contains('isAnimating')) return
        // 如果在第五项, 则将定位改为第 0 项, 并设置位置, 此时没有 transition 动画, 秒切
        if (this.currentPosition === this.totalLength) {
          this.currentPosition = 0
          this.swiper.style.transform = `translateX(${-this.currentPosition * 300}px`
        }
        // 将位置设为第一项
        this.currentPosition++
        // 轮播
        setTimeout(() => {
          this.goSlider()
        }, 20)
      }
      /**
       * 轮播
       */
      goSlider() {
        // 添加过渡效果, delay 需要一致; 位置偏移一个单位
        this.swiper.style.transition = `transform ${this.delay / 1000}s ease`
        this.swiper.style.transform = `translateX(${-this.currentPosition * 300}px`
        // 添加正在切换的class, 给上面 animate 方法用来判断
        this.swiper.classList.add('isAnimating')
        // 切换结束, 清空状态, 清空过渡效果
        setTimeout(() => {
          this.swiper.style.transition = ''
          this.swiper.classList.remove('isAnimating')
        }, this.delay)
      }
      /**
       * 开始轮播
       */
      start() {
        setInterval(() => this.animate(), this.delay)
      }
    }
  </script>
  <script>
    window.onload = function () {
      const slider = new SliderBox(2000)
      slider.start()
    }
  </script>
<script>
			window.onload = function() {
				var nav = document.getElementById('nav');
				var oNav = nav.getElementsByTagName('li');
				var container = document.getElementById('container');
				var oDiv = container.getElementsByClassName('tab');
				for (var i = 0; i < oNav.length; i++) {
					oNav[i].index = i;
					oNav[i].onclick = function() {
						for (var i = 0; i < oNav.length; i++) {
							oNav[i].className = '';
							oDiv[i].style.display = "none";
						}
						this.className = 'act';
						oDiv[this.index].style.display = "block"
					}
					for (var m = 1; m < oNav.length; m++) {
						oNav[m].className = '';
						oDiv[m].style.display = "none";
					}
				}
			};
		</script>
<style>		
/* 页面1推荐页面 */
#page{
    margin-top: -.5rem;
   
}
.pa-top{
    background:#181818;
    width: 100%;
    margin-left: .0rem;
     /* height:50rem; */
   
 }
 nav ul{
   
        height: 1.6rem;
        background: #2d2d2d;
        /* margin-top: -.2rem; */
        position: fixed;
        width: 100%;
        top: 0;
 }
			nav li {
				display: inline-block;
				/* width: 24%; */
				text-decoration: none;
				/* margin-left: .5rem;
                margin-right: .5rem; */
                padding: 0 .3rem .2rem;
                color: #9D905C;
                font-size: .4rem;
                margin-top: .5rem;
			}
            .wz{
 margin-left: 2.5rem;
            }
            #nav ul img{
                width: .8rem;
                /* margin-top: .5rem; */
                
                 
            }
			.tab {
				/* height: 16.5rem;
                background: #202020; */
                margin-top: 2.1rem;
			}
            .act{
 border-bottom: 3px solid #9D905C;
            }

/* 页面轮播 */
    .dt-box {
      width: 100%;
      height: 4rem;
      overflow: hidden;
      background: red;
      margin-top: .4rem;
      margin-top: 2rem;
    }
  .dt-box .swiper .swiper-item img{
      width: 30rem;
    position: relative;
  }
    .swiper {
      width: 10rem;
      height:4rem;
    }
    .swiper .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 10rem;
      height: 100%;
      float: left;
      box-sizing: border-box;
      background: #efefef;
      border: 1px solid #333;
    }

    .swiper .swiper-item:nth-child(2n) {
      background: #fff;
    }

/* 每日推荐 */
 .tj-recommend{
    width: 100%;
    margin-top: .5rem;
 }
 .tj-recommend img{
    width: 31%;
    
 }
/* 作品页面 */
    .dt-user1{
          width: 95%;
    height: 6rem;
    background: #202020;
     margin-left: .25rem;
     border-radius:.3rem;
     margin-top:.3rem ;
    }
  .dt-user1 img:nth-child(1){
      width: 5rem;
      margin-left: .3rem;
  }
  .dt-user1 img:nth-child(2){
      width: 8rem;
       margin-left: 1.3rem;
  }
    .dt-user1 img:nth-child(3){
      width: 3rem;
      margin-top: -2rm;
        margin-left: 1.3rem;
  }
    .dt-user1 img:nth-child(4){
        width: 8rem;
       margin-left: 1.3rem;
  }
/* 页面2榜单页面 */
  #notice{
    width: 100%;
    height: 31rem;
    padding-top:.3rem ;
  }

  #notice p:nth-child(1){
      color: #A79B59;
      font-size: .45rem;
      text-align: center;
  }
  .city{
    width: 100%;
    margin-top: .3rem;
    margin-left: .2rem;
  }
  .city img{
    width: 30%;
  }
  #notice p:nth-child(3){
      color: #A79B59;
      font-size: .45rem;
      text-align: center;
      margin: .3rem 0; 
  }
  .Crunchies{
    width: 100%;
  }
  .Crunchies img{
    display: inline-block;
      text-align: center;
    width: 95%;
  margin-left: .25rem;
  }
   .Crunchies img:nth-child(2){
    /* width: 95%; */
    margin-top: .3rem;
  }
    #notice p:nth-child(5){
      color: #A79B59;
      font-size: .45rem;
      text-align: center;
      margin: .3rem 0; 
  }


  .dtbd-work{
    width: 100%;
    /* height: 18rem; */
    /* background: red; */
  }
  .dtbd-work img{
    width: 100%;
  }
      #notice p:nth-child(7){
      color: #A79B59;
      font-size: .45rem;
      text-align: center;
      margin: .3rem 0; 
  }



  .dtbd-Practice-list{
    width: 95%;
  margin-left: .25rem;
  }

/* 页面3关注页面 */
    #dtbd-select{
       background:#181818;
    width: 100%;
    margin-left: .0rem;
    }

</style>

